import { useRequest, useBoolean } from 'ahooks'
import { View, Text, Navigator, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { getLevelConfig, getUserInfo } from '@/api'
import PayLevelConfin from '@/components/PayLevelConfin'

import './index.module.scss'

export default function Mine() {
  const [showLevelLebel, { setTrue: showLabel, setFalse: hideLabel }] = useBoolean(false)
  const [showLevel, { setFalse, setTrue }] = useBoolean(false)

  const { data: { data: userInfo } = {} } = useRequest(getUserInfo, {})

  useRequest(getLevelConfig, {
    onSuccess() {
      showLabel()
    }
  })

  const loginOutBtn = () => {
    Taro.showModal({
      title: '提示',
      content: `确定退出登录吗`,
      success: (res) => {
        if (res.confirm) {
          Taro.clearStorage()
          Taro.reLaunch({
            url: "/pages/login/index"
          })
        }
      }
    })
  }

  const copy = () => {
    // console.log(111);
    Taro.setClipboardData({
      data: userInfo?.invite_code,
      success: () => {
        Taro.showToast({
          title: '复制成功',
          icon: 'success'
        });
      }
    })
  }

  const handleForward = (item) => {
    if (item.type == 5) return;

    if (userInfo?.open_vip) {
      Taro.navigateTo({ url: `/pages/tasklog/index?type=${item.type}` })
    }
  }

  return (
    <View className='my'>
      <View className='headimages flex-center flex-direction'>
        <Text className='text-xl margin-bottom-xs line-white'>设备号</Text>
        <Text className='line-white text-ds'>{userInfo?.sn}</Text>
        { userInfo?.invite_code && <Button onClick={copy} className='line-white cu-btn margin-top-xs'>邀请码：{userInfo?.invite_code} 复制</Button>}
      </View >
      <View className='num-box shadow-warp'>
        <View className='grid text-center padding-tb-lg padding-lr-xs col-2'>
          <View>
            <View className='text-xl text-33 margin-bottom-xs'>{userInfo?.earn}</View>
            <View className='text-sm text-66'>总收益{userInfo?.unit ? `(${userInfo?.unit})` : ''}</View>
          </View>
          <View>
            <View className='text-xl text-33 margin-bottom-xs'>{userInfo?.balance}</View>
            <View className='text-sm text-66'>积分余额{userInfo?.unit ? `(${userInfo?.unit})` : ''}</View>
          </View>
          {userInfo?.bonus_stats?.map?.(item => (
              <View className='margin-top' onClick={() => handleForward(item) }>
                {/* <View className='text-xs text-99 hint-14'>{item.hint || ' '}</View> */}
                <View className='text-xl text-33 margin-bottom-xs'>{item.value}</View>
                <View className='text-sm text-66'>{item.label}</View>
              </View>
            ))}

          {/* <View className='margin-top'>
            <View className='text-xs text-99'>差{userInfo?.left_months2 || '-'}个月达标</View>
            <View className='text-xl text-33 margin-bottom-xs'>{userInfo?.sim_fee || 0}</View>
            <View className='text-sm text-66'>服务费奖励(元)</View>
          </View> */}
          {/* <View onClick={() => Taro.navigateTo({ url: '/pages/withdraw/rmb' })}>
            <View className='text-xl text-33 margin-bottom-xs'>{userInfo?.rmb_balance || 0}</View>
            <View className='text-sm text-66'>现金余额(元)</View>
          </View> */}
        </View>
      </View>
      <View className='link-box padding-lr text-33'>
        <Navigator url='/pages/withdraw/index' hoverClass='none' openType='navigate' className='flex justify-between padding-tb-lg align-center solid-bottom'>
          <View className='flex text-lg justify-between flex-sub align-center'>
            <View className=''>积分提现</View>
            <View className='lg text-gray cuIcon-right flex-center'></View>
          </View>
          <View className='iconfont icon-you'></View>
        </Navigator>
        {userInfo?.bonus_stats?.map?.(item => (
            <View onClick={() => Taro.navigateTo({ url: `/pages/withdraw/rmb?hint=${item.hint || ''}&type=${item.type}&price=${item.rmb || item.value || 0}` })} className='flex justify-between padding-tb-lg align-center solid-bottom'>
              <View className='flex text-lg justify-between flex-sub align-center'>
                <View className=''>{item.pay_label || item.label.replace('(元)', '提现')}</View>
                <View className='lg text-gray cuIcon-right flex-center'></View>
              </View>
              <View className='iconfont icon-you'></View>
            </View>
        ))}

        {/* <View onClick={() => Taro.navigateTo({ url: `/pages/withdraw/rmb?type=2&price=${userInfo?.sim_fee || 0}` })} className='flex justify-between padding-tb-lg align-center solid-bottom'>
          <View className='flex text-lg justify-between flex-sub align-center'>
            <View className=''>服务费奖励提现</View>
            <View className='lg text-gray cuIcon-right flex-center'></View>
          </View>
          <View className='iconfont icon-you'></View>
        </View> */}
        {showLevelLebel && <View onClick={setTrue} className='flex justify-between padding-tb-lg align-center solid-bottom'>
          <View className='flex text-lg justify-between flex-sub align-center'>
            <View className=''>升级 VIP 代理商</View>
            <View className='lg text-gray cuIcon-right flex-center'></View>
          </View>
          <View className='iconfont icon-you'></View>
        </View>}

        {
          userInfo?.can_invite && <Navigator url='/pages/invite/index' hoverClass='none' openType='navigate' className='flex justify-between padding-tb-lg align-center solid-bottom'>
          <View className='flex text-lg justify-between flex-sub align-center'>
            <View className=''>邀请奖励提现</View>
            <View className='lg text-gray cuIcon-right flex-center'></View>
          </View>
          <View className='iconfont icon-you'></View>
        </Navigator>
        }

        <Navigator url='/pages/withdraw/list' hoverClass='none' openType='navigate' className='flex justify-between padding-tb-lg align-center solid-bottom'>
          <View className='flex text-lg justify-between flex-sub align-center'>
            <View className=''>提现记录</View>
            <View className='lg text-gray cuIcon-right flex-center'></View>
          </View>
          <View className='iconfont icon-you'></View>
        </Navigator>

        { !showLevelLebel && <Navigator url='/pages/vipprivacy/index' hoverClass='none' openType='navigate' className='flex justify-between padding-tb-lg align-center solid-bottom'>
          <View className='flex text-lg justify-between flex-sub align-center'>
            <View className=''>VIP代理协议</View>
            <View className='lg text-gray cuIcon-right flex-center'></View>
          </View>
          <View className='iconfont icon-you'></View>
        </Navigator>}

        <Navigator url='/pages/mine/updatapwb' hoverClass='none' openType='navigate' className='flex justify-between padding-tb-lg align-center solid-bottom'>
          <View className='flex text-lg justify-between flex-sub align-center'>
            <View className=''>修改密码</View>
            <View className='lg text-gray cuIcon-right flex-center'></View>
          </View>
          <View className='iconfont icon-you'></View>
        </Navigator>

        {/* <View onClick={() => showSign()} className='flex justify-between padding-tb-lg align-center solid-bottom'>
          <View className='flex text-lg justify-between flex-sub align-center'>
            <View className=''>VIP协议</View>
            <View className='lg text-gray cuIcon-right flex-center'></View>
          </View>
          <View className='iconfont icon-you'></View>
        </View> */}

      </View>
      <PayLevelConfin show={showLevel} showClose={setFalse} onSuccess={hideLabel} />
      <Button className='text-xl border-none login-btn text-00 margin-lr-lg radius8' onClick={() => loginOutBtn()}>退出登录</Button>
    </View>
  )
}
